<template>
	<gui-popup ref="popupPrivacy" width="650" zIndex="1000">
		<view class="contents">
			<view class="Mask-cnontent">
				<view class="title">用户隐私协议提示</view>
				<view class="text">
					感谢您使用徐州市残疾人就业服务平台小程序，您在使用小程序前请应当阅读并同意
				</view>
				<view class="privacyText" @click="goRule">
					{{privacyContractName}}
				</view>
				<view class="text">
					当您点击同意并开始时用产品服务时，即表示你已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，部分功能可能将不会展示。
				</view>
				<view class="btn-box">
					<button class="btn-one" id="agree-btn" type="default" open-type="agreePrivacyAuthorization"
						@agreeprivacyauthorization="handleAgree">同意协议</button>
					<view class="btn-tow" @click="disagree()">不同意</view>
				</view>

			</view>
		</view>
	</gui-popup>

</template>

<script>
	export default {
		name: "wx-privacy",
		data() {
			return {
				innerShow: false,
				privacyContractName: '《AESIR COFFEE小程序隐私政策》',
			};
		},
		// 组件创建即执行
		created() {
			//可以视情况关闭
			// #ifdef MP-WEIXIN
			this.getPrivacySet()
			// #endif
		},
		methods: {
			//查看协议
			goRule: function(e) {
				wx.openPrivacyContract({
					success: res => {
						console.log('隐式协议成功')
					},
					fail: res => {
						console.error('隐式协议失败', res)
					}
				})
			},
			handleAgree() {
				this.$refs.popupPrivacy.close()
				this.$emit('initData', true)
			},
			//同意协议
			disagree() {
				this.$refs.popupPrivacy.close()
				//同意协议后本组件调用父组件方法
				this.$emit('initData', false)
				//uni.navigateBack() //可以视情况打开
			},

			// 检测用户是否需要开启权限
			getPrivacySet() {
				var _this = this
				wx.getPrivacySetting({
					success: res => {
						console.log("=================================");
						console.log(res);
						if (res.needAuthorization) {
							uni.hideLoading()
							// 需要弹出隐私协议
							_this.showPrivacy = !res.needAuthorization || false
							_this.$nextTick(function() {
								_this.$refs.popupPrivacy.open()
							})
							_this.privacyContractName = res.privacyContractName
						} else {
							// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
							_this.showPrivacy = true
							_this.privacyContractName = res.privacyContractName
						}
					},
					fail(err) {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 680rpx;
		// background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;

		// display: ;
		.Mask-cnontent {
			width: 70%;
			padding: 30rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				margin-bottom: 15rpx;
			}

			.privacyText {
				color: #4072fe;
			}

			.text {
				margin: 20rpx 0;
				color: #B5B5B5;

			}

			.btn-box {
				.btn-one {
					margin: 40rpx auto 38rpx;
					width: 400rpx;
					height: 96rpx;
					background-color: #4072fe;
					box-shadow: -4rpx -8rpx 16rpx 0rpx rgba(255, 255, 255, 0.6), 4rpx 8rpx 16rpx 0rpx #4072fe;
					border-radius: 48rpx;
					font-size: 35rpx;
					line-height: 96rpx;
					letter-spacing: 6rpx;
					text-align: center;
					color: #fff;

				}

				.btn-tow {
					text-align: center;
					font-size: 30rpx;
					line-height: 40rpx;
					text-decoration: underline;
					color: #B5B5B5;
				}

			}
		}
	}
</style>